<template>
    <div>
        <div>
            <f-table
                id="resourceLists"
                ref="tableRef"
                row-key="id"
                :fetch="fetch"
                :columns="columns"
                :scroll="{ x: 'max-content' }"
                :row-selection="{
                    selectedRowKeys,
                    onChange: handleCheck,
                    getCheckboxProps,
                    preserveSelectedRowKeys: true,
                }"
                :resize-scroll-gap="16 + 1 + 24"
            >
                <template #higherSearchStatic="{ model }">
                    <a-row :gutter="32">
                        <a-col :span="8">
                            <a-form-item name="warp_name">
                                <div class="higher-search-item">
                                    <span class="higher-search-item-label">资源包名称</span>
                                    <a-input
                                        v-model:value="model.warp_name"
                                        placeholder="请输入资源包名称"
                                        allow-clear
                                    />
                                </div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item name="template_name">
                                <div class="higher-search-item">
                                    <span class="higher-search-item-label">资源包模板</span>
                                    <a-input
                                        v-model:value="model.template_name"
                                        placeholder="请输入资源包模板"
                                        allow-clear
                                    />
                                </div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item name="author">
                                <div class="higher-search-item">
                                    <span class="higher-search-item-label">创建人</span>
                                    <a-input
                                        v-model:value="model.author"
                                        placeholder="请输入创建人"
                                        allow-clear
                                    />
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </template>

                <template #higherSearchExpandable="{ model }">
                    <a-row :gutter="32">
                        <a-col :span="8">
                            <a-form-item name="creat_at">
                                <div class="higher-search-item">
                                    <span class="higher-search-item-label">操作时间</span>
                                    <a-range-picker
                                        v-model="model.creat_at"
                                        style="width: 600px"
                                        show-time
                                        format="YYYY-MM-DD HH:mm:ss"
                                        :placeholder="['开始时间', '结束时间']"
                                        @change="updateTimeChange"
                                    />
                                </div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item name="status">
                                <div class="higher-search-item">
                                    <span class="higher-search-item-label">状态</span>

                                    <a-select
                                        v-model:value="status"
                                        placeholder="请选择状态"
                                        allow-clear
                                    >
                                        <a-select-option value="已发布">已发布</a-select-option>
                                        <a-select-option value="未发布">未发布</a-select-option>
                                        <a-select-option value="取消发布">取消发布</a-select-option>
                                    </a-select>
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </template>
                <template #toolbar>
                    <a-button type="primary" @click="AddShowModal">新建</a-button>
                    <a-button type="primary" style="display: none">批量删除</a-button>

                    <span v-if="selectedRows.length > 0">
                        已选择
                        <span class="number-background">{{ selectedRows.length }}</span>
                        项
                    </span>
                </template>
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex === 'operation'">
                        <a-button type="link" @click="showModalUpdate(record)">编辑</a-button>

                        <a-button type="link" class="button" @click="showModalPreview(record)"
                            >预览</a-button
                        >
                        <a-button type="link" class="button" @click="delectModal(record)"
                            >删除</a-button
                        >
                        <a-popover>
                            <template #content>
                                <a-button
                                    v-if="record.status === '未发布'"
                                    type="link"
                                    class="button"
                                    value="small"
                                    @click="showModalVerify"
                                    >验证</a-button
                                >
                                <a-button
                                    v-if="record.status === '未发布'"
                                    type="link"
                                    class="button"
                                    ghost
                                    @click="modalPublish(record)"
                                    >发布</a-button
                                >
                                <a-button
                                    v-if="record.status === '已发布'"
                                    type="link"
                                    class="button"
                                    ghost
                                    @click="modalPublish(record)"
                                    >取消发布</a-button
                                >

                                <a-button type="link" @click="showCloneMatal(record)"
                                    >克隆</a-button
                                >
                                <a-button
                                    v-if="record.status === '已发布'"
                                    type="link"
                                    class="button"
                                    :loading="isLoading"
                                    @click="downloads(record)"
                                    >下载</a-button
                                >
                            </template>
                            <more-outlined />
                        </a-popover>
                    </template>
                </template>
            </f-table>
        </div>
        <a-modal
            v-model:open="open"
            title="请问确定要删除吗？"
            ok-text="确定"
            centered
            cancel-text="取消"
            @ok="handleDelect"
        >
        </a-modal>

        <a-modal
            v-model:open="openAdd"
            ok-text="确定"
            cancel-text="取消"
            centered
            title="请选择资源包模板"
            :mask-closable="false"
            @ok="AddhandleOk"
            @cancle="cancle1"
        >
            <a-select
                ref="select"
                v-model:value="selectValue"
                placeholder="请选择模板"
                style="width: 450px"
                @focus="focus"
                @change="handleChange"
            >
                <a-select-option v-for="name in nameList" :key="name" :value="name">{{
                    name
                }}</a-select-option>
            </a-select>
        </a-modal>
        <!-- <a-modal v-model:open="openAddresourceList" ok-text="确定">
            <a-select
                ref="select"
                v-model:value="selectValue"
                placeholder="请选择模板"
                style="width: 450px"
                @focus="focus"
                @change="handleChange"
            >
                <a-select-option v-for="name in nameList" :key="name" :value="name">{{
                    name
                }}</a-select-option>
            </a-select>
        </a-modal> -->
        <a-modal
            v-model:open="openAddresourceList"
            ok-text="确定"
            cancel-text="取消"
            title="新建资源包"
            width="77vw"
            :mask-closable="false"
            centered
            @cancle="cancle"
            @ok="AddhandleOkresourceList"
            :body-style="{ overflow: 'hidden' }"
            :style="{ maxWidth: '1200px' }"
            class="fixed-modal"
        >
            <div class="search-item-preview">
                <div class="title-preview">资源包名称</div>
                <a-input
                    v-model:value="zybName"
                    class="a-inp-preview"
                    :disabled="iamgeValue1 !== ''"
                />
            </div>

            <div class="search-item-preview">
                <div class="title-preview">模板</div>
                <a-input v-model:value="selectValue" disabled class="a-inp-preview" />
            </div>
            <div class="search-item-preview">
                <div class="title-preview">创建人</div>
                <a-input v-model:value="counterStore.username" class="a-inp-preview" />
            </div>
            <hr />

            <div class="marmodal">
                <addmodelMargin
                    :img="imagelength == false"
                    :zyb-name="zybName"
                    :array-props="result"
                    @send1="getdata"
                />
            </div>

            <hr />
            <div class="search-item-preview">
                <div class="title-preview">资源包说明</div>
                <a-textarea
                    v-model:value="rescourceDesc"
                    :auto-size="{ minRow: 2, maxRow: 5 }"
                    class="a-inp-preview"
                />
            </div>
        </a-modal>

        <a-modal
            v-model:open="openPreview"
            cancel-text="取消"
            title="预览"
            width="77vw"
            :mask-closable="false"
            centered
            :body-style="{ overflow: 'hidden' }"
            :style="{ maxWidth: '1200px' }"
            class="fixed-modal"
        >
            <template #footer>
                <a-button key="back" @click="handlecancel">取消</a-button>
            </template>

            <div class="search-item-preview">
                <div class="title-preview">资源包名称</div>
                <a-input v-model:value="resourinfo.warpname" class="a-inp-preview" />
            </div>
            <div class="search-item-preview">
                <div class="title-preview">模板</div>
                <a-input v-model:value="resourinfo.template" class="a-inp-preview" />
            </div>
            <div class="search-item-preview">
                <div class="title-preview">创建人</div>
                <a-input v-model:value="resourinfo.author" class="a-inp-preview" />
            </div>
            <hr />

            <div class="marmodal">
                <marginModal :array-props="resultPreview" />
            </div>
            <hr />
            <div class="search-item-preview">
                <div class="title-preview">资源包说明</div>
                <a-textarea
                    v-model:value="resourinfo.desc"
                    :auto-size="{ minRow: 2, maxRow: 5 }"
                    class="a-inp-preview"
                />
            </div>
        </a-modal>
        <a-modal
            v-model:open="openVerify"
            ok-text="确定"
            centered
            :mask-closable="false"
            cancel-text="取消"
            title="请输入防火墙验证地址"
            @ok="handleOkVerify"
        >
            <a-input v-model:value="NgfwAddress" class="a-inp" placeholder="请输入防火墙验证地址" />
        </a-modal>
        <a-modal
            v-model:open="openUpdate"
            title="编辑资源包信息"
            ok-text="确定"
            centered
            width="77vw"
            cancel-text="取消"
            :mask-closable="false"
            @ok="handleOkUpdate"
            :body-style="{ overflow: 'hidden' }"
            :style="{ maxWidth: '1200px' }"
            class="fixed-modal"
        >
            <div class="search-item-preview">
                <div class="title-preview">资源包名称</div>
                <a-input v-model:value="updatedinfo.warpname" disabled class="a-inp-preview" />
            </div>
            <div class="search-item-preview">
                <div class="title-preview">模板</div>
                <a-input v-model:value="updatedinfo.template" disabled class="a-inp-preview" />
            </div>
            <div class="search-item-preview">
                <div class="title-preview">创建人</div>
                <a-input v-model:value="updatedinfo.author" class="a-inp-preview" />
            </div>
            <hr />

            <div class="marmodal">
                <updateMargin :array-props="resultUpdata" :warp-name="updatedinfo.warpname" />
            </div>
            <hr />
            <div class="search-item-preview">
                <div class="title-preview">资源包说明</div>
                <a-textarea
                    v-model:value="updatedinfo.desc"
                    :auto-size="{ minRow: 2, maxRow: 5 }"
                    class="a-inp-preview"
                />
            </div>
        </a-modal>
        <a-modal
            v-model:open="openClone"
            ok-text="确定"
            centered
            cancel-text="取消"
            :mask-closable="false"
            title="克隆"
            @ok="handleOkClone"
        >
            <div class="clonemargin">
                <div class="title">资源包名称</div>
                <div class="text">
                    <a-input
                        v-model:value="cloneNewName"
                        class="a-inp"
                        :placeholder="resourcename"
                    />
                </div>
            </div>
        </a-modal>
        <a-modal
            v-model:open="openpublish"
            title="请问确定要发布吗？"
            ok-text="确定"
            centered
            cancel-text="取消"
            @ok="handleOkPublish"
        >
        </a-modal>
    </div>
</template>

<script setup>
import { ref } from 'vue';

import { MoreOutlined } from '@ant-design/icons-vue';

/*
 * import { useRouter } from 'vue-router';
 * 发布按钮逻辑部分
 */
import { message } from 'ant-design-vue';
import { omit } from 'lodash-es';

import { doloadBlob } from '@/commom/common';
import addmodelMargin from '@/components/addModalComponent/addmodelmargin.vue';
import marginModal from '@/components/modalComponent/marginmodal.vue';
import updateMargin from '@/components/update/updateMargin.vue';
import service from '@/service';
import pinia from '@/store';
import useCounter from '@/store/counter';

const isLoading = ref(false);
const counterStore = useCounter(pinia);
// 发布的模糊查询

const iamgeValue1 = ref('');

function getdata(data) {
    iamgeValue1.value = data;
}

// 下载
const downloads = async (record) => {
    try {
        const params = {
            resource_name: record.warp_name,
        };

        const { data, filename } = await service.download('/warp/download', params);

        doloadBlob(data, filename);
        isLoading.value = false;
    } catch (error) {
        message.error(error);
    }
};
// 克隆
const resourcename = ref('');
const cloneNewName = ref('');
const openClone = ref(false);
const showCloneMatal = (record) => {
    openClone.value = true;
    resourcename.value = record.warp_name;
};

const handleOkClone = async () => {
    try {
        const params = {
            name: cloneNewName.value,
            resource_name: resourcename.value,
            username: counterStore.username,
        };

        isLoading.value = ref(true);

        const res = await service.get('/warp/upload', params);

        if (res === 'success') {
            isLoading.value = ref(true);

            tableRef.value.refresh();

            message.success('克隆成功');
            openClone.value = false;
        }
    } catch (error) {
        message.error('克隆操作失败');
    }
};
// 删除
const ziyuanbaoname = ref('');
const open = ref(false);
const delectModal = (record) => {
    open.value = true;
    ziyuanbaoname.value = record.warp_name;
};
const handleDelect = async () => {
    try {
        const params = {
            resource_name: ziyuanbaoname.value,
        };
        const res = await service.delete('/warp', params);

        if (res === 'success') {
            tableRef.value.refresh();
            message.success('删除成功');
            open.value = false;
        }
    } catch (error) {
        message.error('删除操作失败，请重试');
    }
};
// 查询时间范围 这个starttime 和endtime 在请求接口的时候记得传过去

const startTime = ref('');
const endTime = ref('');
const updateTimeChange = (value, dateString) => {
    startTime.value = dateString[0];
    endTime.value = dateString[1];
};
// 新建部分

const zybName = ref('');

const selectValue = ref(null);
const rescourceDesc = ref('');
const nameList = ref([]);
const openAdd = ref(false);
const AddShowModal = async () => {
    const res = await service.get('/name');

    nameList.value = res;
    // 打开选择模板弹窗
    openAdd.value = true;
};
// 新建选择模板之后 调资源包类型预览部分
const result = ref([]);
const AddhandleOk = async () => {
    if (selectValue.value) {
        openAdd.value = false;
        openAddresourceList.value = true;
    } else {
        message.warning('请选择模板');
    }

    try {
        const baseUrl = '/warpTemplate';

        const fullUrl = `${baseUrl}/${selectValue.value}`;

        const res = await service.get(fullUrl);

        const { data, sort } = res;

        const loop = (cSort, cdata) => {
            const ndata = cdata;

            return cSort.children.reduce((prev, curr) => {
                const tdata = ndata[curr.name];

                if (!tdata) {
                    return prev;
                }

                if (
                    ['string', 'int', 'ico', 'svg', 'png', 'bool', '', 'exe', 'pem'].includes(
                        tdata.type,
                    )
                ) {
                    prev.push(tdata);
                } else if (tdata.type === 'object') {
                    prev.push({
                        ...tdata,
                        value: loop(curr, tdata.value),
                    });
                }

                return prev;
            }, []);
        };

        result.value = loop(sort, data);
    } catch (error) {
        message.error('获取模板类型失败');
    }
};
const openAddresourceList = ref(false);
// const jsonYaml = ref(null);
const cancle = () => {
    tableRef.value.refresh();
    zybName.value = '';
    rescourceDesc.value = '';

    selectValue.value = '';
};
const cancle1 = () => {
    tableRef.value.refresh(true);
    zybName.value = '';
    rescourceDesc.value = '';

    selectValue.value = '';
};
const AddhandleOkresourceList = async () => {
    try {
        const loop = (arr) => {
            return arr.reduce((prev, curr) => {
                prev[curr.name] = {
                    ...curr,
                    value: curr.type === 'object' ? loop(curr.value) : curr.value,
                };

                return prev;
            }, {});
        };

        const obj = loop(result.value);

        const params = {
            yaml_detail: obj,
            warp_name: zybName.value,
            template_name: selectValue.value,
            desc: rescourceDesc.value,
            author: counterStore.username,
            status: void 0,
            create_at: '',
            updated_at: '',
            bucket: '',
            key: '',
        };

        if (zybName.value) {
            const res = await service.post('/warp', params);

            if (res === 'success') {
                tableRef.value.refresh();
                // eslint-disable-next-line no-unused-expressions
                zybName.value = '';
                rescourceDesc.value = '';
                iamgeValue1.value = '';
                selectValue.value = '';

                openAddresourceList.value = false;
            }
        } else {
            message.warning('请输入资源包名称');
        }
    } catch (error) {
        console.log(error);
    }

    tableRef.value.refresh();
};
/*
 * 新建组装JSON数据部分
 * const jsonData = rective({});
 */

// 预览部分
const resourinfo = reactive({
    warpname: '',
    template: '',
    author: '',
    desc: '',
});
const resultPreview = ref([]);
// const response = ref({});
const openPreview = ref(false);
const showModalPreview = async (record) => {
    openPreview.value = true;

    try {
        const baseUrl = '/warp';

        resourinfo.warpname = record.warp_name;
        resourinfo.template = record.template_name;
        resourinfo.author = record.author;
        resourinfo.desc = record.desc;

        const fullUrl = `${baseUrl}/${record.warp_name}`;

        const res = await service.get(fullUrl);

        if (res) {
            openPreview.value = true;
        }

        const { data, sort } = res;

        const loop = (cSort, cYamlDetail) => {
            const nYamlDetail = cYamlDetail;

            return cSort.children.reduce((prev, curr) => {
                const tYamlDetail = nYamlDetail[curr.name];

                if (!tYamlDetail) {
                    return prev;
                }

                if (
                    ['string', 'int', 'ico', 'svg', 'png', 'bool', '', 'exe', 'pem'].includes(
                        tYamlDetail.type,
                    )
                ) {
                    prev.push(tYamlDetail);
                } else if (tYamlDetail.type === 'object') {
                    prev.push({
                        ...tYamlDetail,
                        value: loop(curr, tYamlDetail.value),
                    });
                }

                return prev;
            }, []);
        };

        resultPreview.value = loop(sort, data.yaml_detail);
    } catch (error) {
        message.error(error);
    }
};

const handlecancel = () => {
    openPreview.value = false;
};
// 验证按钮部分
const NgfwAddress = ref('');
const openVerify = ref(false);
const showModalVerify = () => {
    openVerify.value = true;
};
const handleOkVerify = () => {
    openVerify.value = false;
};
// 发布部分
const warpName = ref('');
const openpublish = ref(false);
const pathArray = ref([]);
const sendParh = ref([]);
const modalPublish = async (record) => {
    openpublish.value = true;
    warpName.value = record.warp_name;

    try {
        const baseUrl = '/warp';

        resourinfo.warpname = record.warp_name;
        resourinfo.template = record.template_name;
        resourinfo.author = record.author;
        resourinfo.desc = record.desc;

        const fullUrl = `${baseUrl}/${record.warp_name}`;

        const res = await service.get(fullUrl);

        const { data, sort } = res;

        const loop = (cSort, cYamlDetail) => {
            const nYamlDetail = cYamlDetail;

            return cSort.children.reduce((prev, curr) => {
                const tYamlDetail = nYamlDetail[curr.name];

                if (!tYamlDetail) {
                    return prev;
                }

                if (
                    ['string', 'int', 'ico', 'svg', 'png', 'bool', '', 'exe', 'pem'].includes(
                        tYamlDetail.type,
                    )
                ) {
                    prev.push(tYamlDetail);
                } else if (tYamlDetail.type === 'object') {
                    prev.push({
                        ...tYamlDetail,
                        value: loop(curr, tYamlDetail.value),
                    });
                }

                return prev;
            }, []);
        };

        pathArray.value = loop(sort, data.yaml_detail);
    } catch (error) {
        message.error(error);
    }

    const pathResult = [];

    pathArray.value.forEach((item) => {
        if (item.type === 'object' && Array.isArray(item.value)) {
            item.value.forEach((subItem) => {
                if (['ico', 'svg', 'png'].includes(subItem.type)) {
                    pathResult.push({ [subItem.name]: subItem.value });
                }
            });
        }
    });
    sendParh.value = pathResult;
};

const handleOkPublish = async () => {
    const params = sendParh.value;

    try {
        const res = await service.put(`/warp/status?resource_name=${warpName.value}`, params);

        if (res === '已发布') {
            message.success('发布成功');
            openpublish.value = false;
        }

        tableRef.value.refresh();
    } catch (error) {
        message.error(`发布失败,请上传${error.response.data}字段`);
    }
};

// 编辑部分
const updatedinfo = reactive({
    warpname: '',
    template: '',
    author: '',
    desc: '',
    status: void 0,
    createtime: '',
    updatedtime: '',
    bucket: '',
    key: '',
});
const resultUpdata = ref([]);
const openUpdate = ref(false);
const showModalUpdate = async (record) => {
    openUpdate.value = true;
    updatedinfo.warpname = record.warp_name;
    updatedinfo.template = record.template_name;
    updatedinfo.author = record.author;
    updatedinfo.desc = record.desc;
    updatedinfo.status = record.status;
    updatedinfo.createtime = record.create_at;
    updatedinfo.updatedtime = record.update_at;
    updatedinfo.bucket = record.bucket;
    updatedinfo.key = record.key;

    try {
        const baseUrl = '/warp';

        resourinfo.warpname = record.warp_name;
        resourinfo.template = record.template_name;
        resourinfo.author = record.author;
        resourinfo.desc = record.desc;

        const fullUrl = `${baseUrl}/${record.warp_name}`;

        const res = await service.get(fullUrl);

        // eslint-disable-next-line camelcase
        const { data, sort } = res;

        const loop = (cSort, cYamlDetail) => {
            // const nYamlDetail = cSort.name === 'root' ? yamlDetail : cYamlDetail[cSort.name];
            const nYamlDetail = cYamlDetail;

            return cSort.children.reduce((prev, curr) => {
                const tYamlDetail = nYamlDetail[curr.name];

                if (!tYamlDetail) {
                    return prev;
                }

                if (
                    ['string', 'int', 'ico', 'svg', 'png', 'bool', '', 'exe', 'pem'].includes(
                        tYamlDetail.type,
                    )
                ) {
                    prev.push(tYamlDetail);
                } else if (tYamlDetail.type === 'object') {
                    prev.push({
                        ...tYamlDetail,
                        value: loop(curr, tYamlDetail.value),
                    });
                }

                return prev;
            }, []);
        };

        resultUpdata.value = loop(sort, data.yaml_detail);
    } catch (error) {
        message.error(error);
    }
};

const handleOkUpdate = async () => {
    try {
        const loop = (arr) => {
            return arr.reduce((prev, curr) => {
                prev[curr.name] = {
                    ...curr,
                    value: curr.type === 'object' ? loop(curr.value) : curr.value,
                };

                return prev;
            }, {});
        };

        const obj = loop(resultUpdata.value);

        const params = {
            yaml_detail: obj,
            warp_name: updatedinfo.warpname,
            template_name: updatedinfo.template,
            desc: updatedinfo.desc,
            author: updatedinfo.author,
            status: updatedinfo.status,
            create_at: updatedinfo.createtime,
            updated_at: updatedinfo.updatedtime,
            bucket: updatedinfo.bucket,
            key: updatedinfo.key,
        };

        const res = await service.put('/warp', params);

        if (res) {
            tableRef.value.refresh();
            // eslint-disable-next-line no-unused-expressions
            zybName.value = '';
            rescourceDesc.value = '';
            iamgeValue1.value = '';
            selectValue.value = '';
            openUpdate.value = false;
        }
    } catch (error) {
        message.error(error);
    }
};

// 选中部分
const tableRef = ref(null);

const selectedRowKeys = computed(() => selectedRows.value.map((row) => row.warp_name));
let selectedRows = ref([]);
const handleCheck = (_, rows) => {
    selectedRows.value = rows;
};
const getCheckboxProps = (row) => {
    return {
        disabled: row.status === '已发布',
    };
};

const columns = [
    {
        title: '资源包名称',
        dataIndex: 'warp_name',
        width: 200,
    },
    {
        title: '资源包模板',
        dataIndex: 'template_name',
        width: 200,
    },

    {
        title: '字段修改',
        dataIndex: 'wrapTemplate',
        width: 200,
    },
    {
        title: '状态',
        dataIndex: 'status',
        width: 200,
    },
    {
        title: '创建人',
        dataIndex: 'author',
        width: 200,
    },
    {
        title: '创建时间',
        dataIndex: 'create_at',
        width: 200,
    },
    {
        title: '修改时间',
        dataIndex: 'updated_at',
        width: 200,
    },
    {
        title: '资源包说明',
        dataIndex: 'desc',
        width: 200,
    },
    {
        title: '操作',
        dataIndex: 'operation',
        fixed: 'right',
        width: 300,
    },
];
const status = ref(void 0);
const fetch = async (params) => {
    try {
        const res = await service.get('/warp', {
            ...omit(params, ['page', 'pageSize']),
            offset: (params.page - 1) * params.pageSize,
            limit: params.pageSize,
            startTime: startTime.value,
            endTime: endTime.value,
            status: status.value,
        });

        return Promise.resolve({
            dataSource: res.data,
            total: res.total,
        });
    } catch (error) {
        // message.error(error);
    }
};
</script>

<style lang="scss" scoped>
.fixed-modal {
    .ant-modal-content {
        max-width: 1200px;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .ant-modal-body {
            flex: 1;
            overflow: auto;
            padding: 24px;
        }
    }
}

.button {
    margin: 0 5px;
}

.search-item-preview {
    display: flex;
    width: 100%;
    height: 35px;
    padding: 0;
    margin: 10px 5px;
}

.title-preview {
    width: 150px;
    line-height: 25px;
    padding-left: 20px;
    font-size: 16px;
}

.a-inp-preview {
    border-radius: 3px;
}

.marmodal {
    max-height: 55vh;
    overflow: auto;
    font-size: 16px;
}
</style>
